<template>
  <div class="container">
    <a-modal
      v-model:visible="visible"
      fullscreen
      :footer="false"
      @close="resetFields"
    >
      <template #title>
        {{ formData?.id ? '编辑停车场' : '新增停车场' }}
      </template>
      <a-alert style="margin-bottom: 16px">
        提示： 点击右侧按钮可快速查找经纬度
        <template #action>
          <a-button size="small" type="primary" @click="showMapView"
            >点我</a-button
          >
        </template>
      </a-alert>
      <a-form ref="formRef" layout="vertical" :model="formData">
        <a-space direction="vertical" :size="16">
          <a-card class="general-card">
            <template #title> 必填信息 </template>
            <a-row :gutter="80">
              <a-col :span="8">
                <a-form-item
                  label="停车场地址"
                  field="address"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.address"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="计费模式"
                  field="billingModel"
                  validate-trigger="input"
                  required
                >
                  <a-select
                    v-model="formData.billingModel"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option value="dynamic_time">动态时间计费</a-option>
                    <a-option value="fixed_time">固定时长计费</a-option>
                    <a-option value="dynamic_fixed_time">动态时间按段时长计费</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="过期车辆免费时间(分钟)"
                  field="expiredCarFreeTime"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.expiredCarFreeTime"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="单日费用封顶"
                  field="feeUpperLimit"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.feeUpperLimit"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="免费时长(分钟)"
                  field="freeTime"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.freeTime"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="离场时间限制(分钟)"
                  field="leaveTimeLimit"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.leaveTimeLimit"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="停车场名字"
                  field="name"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.name"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="车位数"
                  field="parkingSpaceNumber"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.parkingSpaceNumber"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="停车场负责人手机号"
                  field="phone"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.phone"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="经度"
                  field="positionX"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.positionX"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="纬度"
                  field="positionY"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.positionY"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="单位时长(分钟)"
                  field="unitDuration"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.unitDuration"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="已用车位数"
                  field="usedParkingSpaceNumber"
                  validate-trigger="input"
                  required
                >
                  <a-input
                    v-model="formData.usedParkingSpaceNumber"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card class="general-card">
            <template #title> 选填信息 </template>
            <a-row :gutter="80">
              <a-col :span="8">
                <a-form-item label="是否开启追缴" field="recovery">
                  <a-select
                    v-model="formData.recovery"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="重复入场校验时长(分钟)"
                  field="checkRepeatTime"
                >
                  <a-input
                    v-model="formData.checkRepeatTime"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item
                  label="停车记录异常是否自动放行"
                  field="abnormalAutoRelease"
                >
                  <a-select
                    v-model="formData.abnormalAutoRelease"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="允许提前预约时间"
                  field="advanceSubscribeTime"
                >
                  <a-input
                    v-model="formData.advanceSubscribeTime"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="是否允许值班人修改停车记录"
                  field="allowEditUseLog"
                >
                  <a-select
                    v-model="formData.allowEditUseLog"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="是否自动下发白名单"
                  field="autoIssuedWhitelist"
                >
                  <a-select
                    v-model="formData.autoIssuedWhitelist"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="充电站id" field="chargingStationId">
                  <a-input
                    v-model="formData.chargingStationId"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="代收停车场id" field="collectionCarparkId">
                  <a-input
                    v-model="formData.collectionCarparkId"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item label="当前价格" field="currentPrice">
                  <a-input
                    v-model="formData.currentPrice"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="是否禁止家庭组同时入内"
                  field="forbidGroupFlagSameTimeIn"
                >
                  <a-select
                    v-model="formData.forbidGroupFlagSameTimeIn"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="座机" field="landline">
                  <a-input
                    v-model="formData.landline"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item
                  label="是否通知车辆套餐到期"
                  field="packageExpirationNotice"
                >
                  <a-select
                    v-model="formData.packageExpirationNotice"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="车位满时限制"
                  field="limitParkingSpaceNumber"
                >
                  <a-select
                    v-model="formData.limitParkingSpaceNumber"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="车牌号颜色判定车辆类型"
                  field="numberPlateColorToCarType"
                >
                  <a-input
                    v-model="formData.numberPlateColorToCarType"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="家庭组免停期自动切换"
                  field="packageGroupFlagFreeTimeChange"
                >
                  <a-select
                    v-model="formData.packageGroupFlagFreeTimeChange"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item label="评分" field="score">
                  <a-input
                    v-model="formData.score"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="是否显示已过期套餐车类型"
                  field="showExpiredCarType"
                >
                  <a-select
                    v-model="formData.showExpiredCarType"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="是否显示停车记录备注" field="showRemarks">
                  <a-select
                    v-model="formData.showRemarks"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="过期车辆特殊计费"
                  field="specialFeeExpiredCar"
                >
                  <a-select
                    v-model="formData.specialFeeExpiredCar"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">否</a-option>
                    <a-option :value="1">是</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="特殊车牌号" field="specialNumberPlate">
                  <a-input
                    v-model="formData.specialNumberPlate"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="起步价" field="startingPrice">
                  <a-input
                    v-model="formData.startingPrice"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item label="状态" field="status">
                  <a-select
                    v-model="formData.status"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">正常</a-option>
                    <a-option :value="1">车位已满</a-option>
                    <a-option :value="2">暂停营业</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="仓库物流id" field="storehouseId">
                  <a-input
                    v-model="formData.storehouseId"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="预约费用(预付)" field="subscribeFee">
                  <a-input
                    v-model="formData.subscribeFee"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="预约后多少时间免责取消(分钟)"
                  field="subscribeFreeTime"
                >
                  <a-input
                    v-model="formData.subscribeFreeTime"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="预约后超时但未使用扣费比例(百分比)"
                  field="subscribeTimeoutFee"
                >
                  <a-input
                    v-model="formData.subscribeTimeoutFee"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="滞留车辆界定时间(天)"
                  field="strandedVehiclesDefinedTime"
                >
                  <a-input
                    v-model="formData.strandedVehiclesDefinedTime"
                    placeholder="请输入(天数)"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="车辆预约到访审核模式"
                  field="visitProcessMode"
                >
                  <a-select
                    v-model="formData.visitProcessMode"
                    placeholder="请选择"
                    allow-clear
                  >
                    <a-option :value="0">关闭</a-option>
                    <a-option :value="1">业主审核</a-option>
                    <a-option :value="2">物业审核</a-option>
                    <a-option :value="3">双重审核</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="国家id" field="countryId">
                  <a-input
                    v-model="formData.countryId"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="省份id" field="provinceId">
                  <a-input
                    v-model="formData.provinceId"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="州或城市id" field="stateOrCityId">
                  <a-input
                    v-model="formData.stateOrCityId"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="乡镇id" field="townshipId">
                  <a-input
                    v-model="formData.townshipId"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="区或县id" field="zoneOrCountyId">
                  <a-input
                    v-model="formData.zoneOrCountyId"
                    placeholder="请输入"
                    allow-clear
                  ></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="图片" field="image">
                  <a-upload
                    list-type="picture-card"
                    action="https://v3.cfeng.wang/file/cfFile/upload"
                    :file-list="fileList"
                    :data="uploadData"
                    image-preview
                    :headers="header"
                    @success="onSuccess"
                    @change="onChange"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-space>
        <div class="actions">
          <a-space>
            <a-button @click="resetFields"> 重置 </a-button>
            <a-button type="primary" :loading="loading" @click="onSubmitClick">
              保存
            </a-button>
          </a-space>
        </div>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="mapVisible"
      :footer="false"
      width="1200px"
      @open="mapModalOpen"
    >
      <a-form :model="mapForm">
        <a-row :gutter="16" align="center">
          <a-col :span="10">
            <a-form-item label="地点搜索" field="carParkId" style="margin-top: 16px;">
              <a-select
                placeholder="请输入"
                allow-search
                allow-clear
                @search="handleSelectSearch"
                @change="handleSelectChange"
                :filter-option="false"
                :loading="selectLoading"
              >
                <a-option
                  v-for="item of addRessArr"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.title + ' - ' + item.address }}</a-option
                >
              </a-select>
              <!-- <a-input-number v-model="formData.carParkId" allow-clear /> -->
            </a-form-item>
          </a-col>
          <a-col :span="3">经度：{{ mapForm.x || '-' }}</a-col>
          <a-col :span="3">纬度：{{ mapForm.y || '-' }}</a-col>
          <!-- <a-col :span="5">
            <a-form-item field="x" label="经度">
              <a-input v-model="mapForm.x" placeholder="please enter..." />
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item field="y" label="纬度" label-col-flex="80px">
              <a-input v-model="mapForm.y" placeholder="please enter..." />
            </a-form-item>
          </a-col> -->
          <a-col :span="3" :offset="1">
            <a-button type="primary" size="large" @click="onMapOk">确认</a-button>
          </a-col>
        </a-row>
      </a-form>
      <div id="mapBox" class="mapbox"> </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { cfCarParkAdd, cfCarParkUpdate } from '@/api/internetOfThings';
  import { Message } from '@arco-design/web-vue';
  import { getToken } from '@/utils/auth';
  import { cloneDeep } from 'lodash';
  import axios from 'axios';
  import { jsonp } from '@/utils/jsonp';

  var maps: any = null;
  var marker: any = null;

  const visible = ref(false);
  const mapVisible = ref(false);
  const loading = ref(false);
  const formRef = ref();
  const emit = defineEmits(['fetchData', 'fetch-data']);
  const fileList = ref([]);
  const uploadFileList = ref([]);
  const header: any = ref({
    Authorization: getToken(),
  });
  const uploadData: any = ref({
    fileType: 1,
    scene: 'carpark',
  });
  const formData = ref({
    abnormalAutoRelease: '',
    address: '',
    advanceSubscribeTime: '',
    allowEditUseLog: '',
    autoIssuedWhitelist: '',
    billingModel: '',
    chargingStationId: '',
    collectionCarparkId: '',
    countryId: '',
    currentPrice: '',
    expiredCarFreeTime: '',
    feeUpperLimit: '',
    forbidGroupFlagSameTimeIn: '',
    freeTime: '',
    image: '',
    landline: '',
    leaveTimeLimit: '',
    limitParkingSpaceNumber: '',
    name: '',
    numberPlateColorToCarType: '',
    packageGroupFlagFreeTimeChange: '',
    parkingSpaceNumber: '',
    phone: '',
    positionX: '',
    positionY: '',
    provinceId: '',
    score: '',
    showExpiredCarType: '',
    showRemarks: '',
    specialFeeExpiredCar: '',
    specialNumberPlate: '',
    startingPrice: '',
    stateOrCityId: '',
    status: '',
    storehouseId: '',
    subscribeFee: '',
    subscribeFreeTime: '',
    subscribeTimeoutFee: '',
    townshipId: '',
    unitDuration: '',
    usedParkingSpaceNumber: '',
    visitProcessMode: '',
    zoneOrCountyId: '',
    recovery: '',
    checkRepeatTime: '',
    packageExpirationNotice: '',
    strandedVehiclesDefinedTime: '',
    id: '',
  });

  // 地图相关方法及数据
  const selectLoading = ref(false);
  const mapForm = ref({
    x: '',
    y: '',
  });
  const addRessArr = ref([]);
  const handleSelectSearch = async (value: any) => {
    if (value) {
      selectLoading.value = true;
      let url = `https://apis.map.qq.com/ws/place/v1/suggestion?keyword=${value}&key=腾讯地图应用key&output=jsonp`;
      const res = await jsonp({ url });
      console.log(res);
      selectLoading.value = false;
      if (res.data.length > 0) {
        addRessArr.value = res.data;
      } else {
        addRessArr.value = [];
      }
    }
    // if (value) {
    //   selectLoading.value = true;
    //   const { data, code } = await axios.get(`https://apis.map.qq.com/ws/place/v1/suggestion?keyword=${value}&key=腾讯地图应用key`)
    //   selectLoading.value = false;
    //   if (code === 10002) {
    //     addRessArr.value = data;
    //   } else {
    //     addRessArr.value = [];
    //   }
    // } else {
    //   addRessArr.value = [];
    // }
  };
  const handleSelectChange = (e: any) => {
    if (e) {
      const findRes = addRessArr.value.find((i) => i.id === e);
      maps.setCenter(
        // @ts-ignore
        new TMap.LatLng(findRes.location.lat, findRes.location.lng)
      );
      // @ts-ignore
      showMarKer(findRes.location.lat, findRes.location.lng);
    }
  };
  const onMapOk = () => {
    formData.value.positionX = mapForm.value.x;
    formData.value.positionY = mapForm.value.y;
    mapVisible.value = false;
  };
  const showMapView = () => {
    mapVisible.value = true;
  };
  const mapModalOpen = () => {
    if (maps === null) {
      initMap();
    }
  };
  const initMap = () => {
    var center = new window.TMap.LatLng(39.98412, 116.307484);
    //初始化地图
    maps = new window.TMap.Map(document.getElementById('mapBox'), {
      center: center, //设置地图中心点坐标
      zoom: 12, //设置地图缩放级别
      mapStyleId: 'style2', //设置地图样式
    });

    //初始化marker图层
    marker = new TMap.MultiMarker({
      id: 'marker-layer',
      map: maps,
    });

    maps.on('click', function (evt: any) {
      var lat = evt.latLng.getLat().toFixed(6);
      var lng = evt.latLng.getLng().toFixed(6);
      showMarKer(lat, lng);
    });
  };

  const showMarKer = (lat: any, lng: any) => {
    if (marker) {
      marker.setMap(null);
    }
    //初始化marker图层
    marker = new TMap.MultiMarker({
      id: 'marker-layer',
      map: maps,
    });

    marker.add({
      position: new TMap.LatLng(lat, lng),
    });

    mapForm.value.y = lat;
    mapForm.value.x = lng;
  };

  // const TMap = (key: any) => {
  //   return new Promise(function (resolve, reject) {
  //     window.init = function () {
  //       resolve(qq); //注意这里
  //     };
  //     var script = document.createElement('script');
  //     script.type = 'text/javascript';
  //     script.src = 'http://map.qq.com/api/js?v=2.exp&callback=init&key=' + key;
  //     script.onerror = reject;
  //     document.head.appendChild(script);
  //   });
  // };
  // // const TMap = (window as any).TMap;

  // const showMapView = () => {
  //   mapVisible.value = true;
  //   initMap();
  // };
  // const initMap = () => {
  //   TMap('腾讯地图应用key').then((qqMap) => {
  //     maps = new qqMap.maps.Map(document.getElementById('mapBox'), {
  //       center: new qqMap.maps.LatLng(39.916527, 116.397128),
  //       zoom: 8,
  //     });
  //     console.log(maps);

  //     maps.on('click', function (evt: any) {
  //       var lat = evt.latLng.getLat().toFixed(6);
  //       var lng = evt.latLng.getLng().toFixed(6);
  //       console.log(lat, lng);
  //     });
  //   });

  //   // //定义地图中心点坐标
  //   // var center = new TMap.LatLng(39.98412, 116.307484);
  //   // console.log(document.getElementById('mapBox'));
  //   // console.log(TMap);

  //   // //定义map变量，调用 TMap.Map() 构造函数创建地图
  //   // var map = new TMap.Map(document.getElementById('mapBox'), {
  //   //   center: center, //设置地图中心点坐标
  //   //   zoom: 17.2, //设置地图缩放级别
  //   //   pitch: 43.5, //设置俯仰角
  //   //   rotation: 45, //设置地图旋转角度
  //   // });
  // };
  // 地图相关方法及数据 End

  const handleClick = (e: any = null) => {
    if (e?.id) {
      const newInfo = JSON.parse(JSON.stringify(e));
      newInfo.expiredCarFreeTime = e.expiredCarFreeTime / 60000;
      newInfo.checkRepeatTime = e.checkRepeatTime / 60000;
      newInfo.freeTime = e.freeTime / 60000;
      newInfo.unitDuration = e.unitDuration / 60000;
      newInfo.leaveTimeLimit = e.leaveTimeLimit / 60000;
      newInfo.subscribeFreeTime = e.subscribeFreeTime / 60000;
      newInfo.strandedVehiclesDefinedTime =
        e.strandedVehiclesDefinedTime / 86400000;

      formData.value = newInfo;
    }
    visible.value = true;
  };
  const resetFields = () => {
    formData.value.id = '';
    formRef.value.resetFields();
    uploadFileList.value = [];
    fileList.value = [];
  };
  const onChange = (_: any, currentFile: any) => {
    console.log(currentFile, _);
    uploadFileList.value = _;
  };
  const onSuccess = (fileRes: any) => {
    // @ts-ignore
    // uploadFileList.value = [...uploadFileList.value, fileRes.response.data.id];
  };
  const onSubmitClick = () => {
    // eslint-disable-next-line consistent-return
    formRef.value.validate(async (valid: any) => {
      if (valid) return false;
      const newForm = cloneDeep(formData.value);

      if (uploadFileList.value.length > 0) {
        newForm.image = uploadFileList.value
          .map((i) => i.response.data.id)
          .join(',');
      }
      newForm.expiredCarFreeTime = String(newForm.expiredCarFreeTime * 60000);
      newForm.checkRepeatTime = String(newForm.checkRepeatTime * 60000);
      newForm.freeTime = String(newForm.freeTime * 60000);
      newForm.unitDuration = String(newForm.unitDuration * 60000);
      newForm.leaveTimeLimit = String(newForm.leaveTimeLimit * 60000);
      newForm.subscribeFreeTime = String(newForm.subscribeFreeTime * 60000);
      newForm.strandedVehiclesDefinedTime = String(
        newForm.strandedVehiclesDefinedTime * 86400000
      );

      // formData.freeTime = e.freeTime / 3600000;
      // formData.unitDuration = e.unitDuration / 3600000;
      // formData.leaveTimeLimit = e.leaveTimeLimit / 3600000;
      // formData.subscribeFreeTime = e.subscribeFreeTime / 3600000;
      // @ts-ignore
      if (newForm.id) {
        const { code } = await cfCarParkUpdate(newForm);
        if (code === 10002) {
          formRef.value.resetFields();
          visible.value = false;
          Message.success('更新成功!');
          emit('fetchData');
        }
      } else {
        const { code } = await cfCarParkAdd(newForm);
        if (code === 10002) {
          formRef.value.resetFields();
          visible.value = false;
          Message.success('添加成功!');
          emit('fetchData');
        }
      }
    });
  };

  defineExpose({ handleClick });
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 40px 20px;
    overflow: hidden;
  }

  .actions {
    height: 60px;
    padding: 14px 20px 14px 0;
    background: var(--color-bg-2);
    text-align: right;
  }
  .mapbox {
    width: 100%;
    height: 800px;
    margin-top: 12px;
  }
</style>
